import { View, StyleSheet, Image } from 'react-native';
import React from 'react';
import Swiper from 'react-native-swiper';

const MySwiper = (props: any) => {
  return (
    // 渲染传递过来的数据
    <Swiper style={styles.wrapper} autoplay showsPagination={false}>
      {props.data.map((item: any) => {
        return (
          <View style={styles.slide} key={item}>
            <Image
              style={styles.bgImage}
              source={{
                uri: item,
              }}
            />
          </View>
        );
      })}
    </Swiper>
  );
};

const styles = StyleSheet.create({
  wrapper: {},
  slide: {
    width: '100%',
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#9DD6EB',
  },
  text: {
    color: '#fff',
    fontSize: 30,
    fontWeight: 'bold',
  },
  bgImage: {
    width: '100%',
    flex: 1,
    resizeMode: 'cover',
    justifyContent: 'center',
  },
});

export default MySwiper;
